<template>
  <el-dialog
    title="添加评论语"
    :visible.sync="addDialogData.isShow"
    width="480px"
    :before-close="labelHandleClose"
  >
    <div class="form-box">
      <!-- 表单部分 -->
      <el-form
        ref="form"
        :model="form"
        label-position="right"
        label-width="100px"
        :rules="formRules"
      >
        <el-form-item label="选择评论等级:">
          <el-select v-model="form.category" placeholder="">
            <el-option
              v-for="item in LevelList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属学院:">
          <el-select v-model="form.college" placeholder="">
            <el-option
              v-for="item in collegeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型:">
          <el-radio-group v-model="form.type">
            <el-radio
              v-for="item in typeList"
              :key="item.dictValue"
              :label="item.dictValue"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="添加评论语:" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="7"
            :placeholder="`请输入评论语(最多输入${maxLength}个字符)`"
            :maxlength="maxLength"
            resize="none"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="cancelLabel">取 消</el-button>
      <el-button type="success" :loading="loading" @click="confirmLabel('form')"
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { addPosts } from '@/api/commentManagement/commentManage' // 接口
import { getKeyValue } from '@/api/system/parameter' // 接口
export default {
  props: ['addDialogData'],
  data() {
    return {
      loading: false,
      // 表单数据
      form: {
        category: '', // 评论等级
        college: '', // 所属学院
        type: '', // 类型// 1图文  2小视频
        content: '' // 评论语输入内容
      },
      typeList: [], // 类型
      // 评论等级列表
      LevelList: [],
      // 当前学院列表
      collegeList: [],
      allCollegeList: [],
      dictValue: 'jp7mdjg6ku', //公益学院dictValue
      interestList: [],
      unInterestList: [], // 不包含兴趣学院
      maxLength: '', // 标题最大长度
      // 表单验证规则
      formRules: {
        content: [{ required: true, message: '请输入评论语', trigger: 'blur' }]
      }
    }
  },
  watch: {
    'form.category': {
      handler(newVal, oldVal) {
        let list = []
        let value = ''
        if (newVal === '4' || newVal === '5') {
          // 评论等级为：通用低配、通用高配，所属学院显示只有兴趣学院
          list = this.interestList
          value = this.interestList[0].dictValue
        } else {
          // 评论等级为：低配、高配，所属学院显示没有兴趣学院
          list = this.unInterestList
          value = this.unInterestList[0].dictValue
        }
        this.collegeList = [...list]
        this.$nextTick(() => {
          this.form.college = value
        })
      },
      deep: true
    }
  },
  mounted() {
    this.setLevelValue()
    this.getTitleLen()
    this.getType()
  },
  methods: {
    /* 给评论等级赋值 */
    setLevelValue() {
      let _this = this
      Promise.all([_this.getCollegeList(), _this.getLevelList()]).then(() => {
        _this.form.category = _this.LevelList[2].dictValue
      })
    },
    /* 获取学院状态 */
    async getCollegeList() {
      let allCollegeList = await sysNormalDisable('sys_share_college')
      this.allCollegeList = this.allCollegeList.concat(allCollegeList)
      // 获取公益学院列表
      let i = this.allCollegeList.findIndex((item) => {
        return item.dictValue === this.dictValue
      })
      this.interestList = [this.allCollegeList[i]]
      // 获取非公益学院列表
      let index = this.allCollegeList.findIndex((item) => {
        return item.dictValue === this.dictValue
      })
      if (index >= 0) {
        this.unInterestList = [...this.allCollegeList]
        this.unInterestList.splice(index, 1)
      }
    },
    /* 获取分享语筛选条件-类型 */
    async getType() {
      let type1 = await sysNormalDisable('sys_share_language_type')
      this.typeList = this.typeList.concat(type1)
      this.form.type = this.typeList[0].dictValue
    },
    /* 获取评论库筛选条件-等级 */
    async getLevelList() {
      let LevelList = await sysNormalDisable('sys_grade')
      this.LevelList = this.LevelList.concat(LevelList)
    },
    /* 获取标题长度 */
    getTitleLen() {
      let params = {
        configKey: 'commentLibraryContentLength'
      }
      getKeyValue(params, (response) => {
        this.maxLength = response
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.form.content = ''
      this.addDialogData.isShow = false
    },
    // 确认添加评论事件
    confirmLabel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let obj = { ...this.form }
          addPosts(
            obj,
            (response) => {
              this.loading = false
              this.$emit('refresh')
              this.cancelLabel()
            },
            (response) => {
              this.loading = false
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
// .el-dialog {
// }
</style>
